<template>
  <h6></h6>
</template>

<script lang="ts">
import {
  defineComponent,
  onBeforeMount,
  onBeforeUnmount,
  onBeforeUpdate,
  onMounted,
  onUnmounted,
  onUpdated,
} from "vue";
// 导入ref
// import { ref, computed } from "vue";
export default defineComponent({
  name: "App",
  // 组合式API入口

  setup() {
    // 定义参数
    console.log("--setup");
    onBeforeMount(() => {
      console.log("--onBeforeMount");
    });
    onMounted(() => {
      console.log("---onMounted");
    });
    // 页面首次调用以上 三个组合函数 setup onBeforeMount onMounted
    onBeforeUpdate(() => {
      console.log("onBeforeUpdate");
    });

    onUpdated(() => {
      console.log("onUpdated");
    });

    // 更新时 以上 两个 onBeforeupdate  onUpdated
    onBeforeUnmount(() => {
      console.log("OnBeforeUnMount");
    });
    onUnmounted(() => {
      console.log("onUnmonted");
    });
    // 卸载时 onBeforeUnmount onUnmounted

    // 返回值
  },
  components: {},
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
